import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { MessageCircle, ThumbsUp, Share2, User, Calendar, MapPin } from 'lucide-react';
export function Community() {
  // Initial set of posts to display
  const initialPostsCount = 3;
  // All community posts data
  const allCommunityPosts = [{
    id: 'post1',
    title: 'Winter Ascent of Mount Rainier: Gear That Saved My Life',
    excerpt: 'Facing unexpected whiteout conditions at 12,000ft, these pieces of gear proved their worth beyond any doubt.',
    image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    author: 'Alex Honnold',
    authorImage: 'https://images.unsplash.com/photo-1548535537-3cfaf1fc327c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '3 days ago',
    location: 'Mount Rainier, WA',
    likes: 248,
    comments: 42
  }, {
    id: 'post2',
    title: 'Ultralight Thru-Hiking: My PCT Gear List Review',
    excerpt: "After completing the Pacific Crest Trail, here's my honest assessment of what gear worked, what failed, and what I'd choose differently next time.",
    image: 'https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    author: 'Emma Mitchell',
    authorImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '1 week ago',
    location: 'Pacific Crest Trail',
    likes: 356,
    comments: 78
  }, {
    id: 'post3',
    title: 'Desert Survival: Testing Water Filters in the Mojave',
    excerpt: "When water sources are scarce and potentially contaminated, having a reliable filtration system is critical. Here's how 5 popular filters performed.",
    image: 'https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    author: 'Carlos Rodriguez',
    authorImage: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '2 weeks ago',
    location: 'Mojave Desert, CA',
    likes: 189,
    comments: 34
  }, {
    id: 'post4',
    title: 'Alpine Photography: The Ultimate Gear Guide',
    excerpt: "From weatherproof camera bodies to lightweight tripods, here's everything you need to capture stunning shots of the high mountains:.",
    author: 'Sarah Kim',
    authorImage: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '3 weeks ago',
    location: 'Swiss Alps',
    likes: 217,
    comments: 29
  }, {
    id: 'post5',
    title: 'Bikepacking Through Patagonia: A Solo Adventure',
    excerpt: 'Three weeks, 600 miles, and countless breathtaking vistas. My complete gear setup and route details for this life-changing journey.',
    image: 'https://images.unsplash.com/photo-1618245318763-a15156d6b23c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    author: 'Marco Santini',
    authorImage: 'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '1 month ago',
    location: 'Patagonia, Argentina',
    likes: 412,
    comments: 53
  }, {
    id: 'post6',
    title: 'How My Tent Survived a Category 3 Storm in Iceland',
    excerpt: 'When 70mph winds and horizontal rain hit our campsite, I learned valuable lessons about shelter selection and proper setup techniques.',
    image: 'https://images.unsplash.com/photo-1504280390367-361c6d9f38f4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80',
    author: 'Freya Olafsson',
    authorImage: 'https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
    date: '2 months ago',
    location: 'Iceland',
    likes: 298,
    comments: 47
  }];
  // State to track how many posts to show
  const [visiblePostsCount, setVisiblePostsCount] = useState(initialPostsCount);
  // Get the posts to display based on current count
  const communityPosts = allCommunityPosts.slice(0, visiblePostsCount);
  // Function to load more posts
  const loadMorePosts = () => {
    setVisiblePostsCount(prevCount => Math.min(prevCount + 3, allCommunityPosts.length));
  };
  // Check if all posts are loaded
  const allPostsLoaded = visiblePostsCount >= allCommunityPosts.length;
  const upcomingEvents = [{
    id: 'event1',
    title: 'Gear Testing Weekend: Mountain Shelters',
    date: 'June 15-17, 2023',
    location: 'Olympic National Park, WA',
    attendees: 18
  }, {
    id: 'event2',
    title: 'Climbing Gear Swap & Clinic',
    date: 'July 8, 2023',
    location: 'Boulder, CO',
    attendees: 45
  }, {
    id: 'event3',
    title: 'Ultralight Backpacking Workshop',
    date: 'July 22, 2023',
    location: 'Portland, OR',
    attendees: 24
  }];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative py-20 bg-carbon-black">
        <div className="absolute inset-0 z-0">
          <img src="https://images.unsplash.com/photo-1527786356703-4b100091cd2c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Community campfire" className="w-full h-full object-cover opacity-40" />
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-3xl">
            <h1 className="font-display text-4xl md:text-6xl mb-4">
              THE BASE CAMP
            </h1>
            <p className="text-xl text-gray-300 mb-8">
              Join our community of adventurers sharing real-world experiences,
              gear insights, and trail stories.
            </p>
            <div className="flex flex-wrap gap-4">
              <Link to="/community/join" className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
                JOIN THE COMMUNITY
              </Link>
              <Link to="/community/share" className="border-2 border-sand-light hover:border-white text-white font-display px-6 py-3 rounded transition-colors">
                SHARE YOUR STORY
              </Link>
            </div>
          </div>
        </div>
      </section>
      {/* Community Feed */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Main Feed */}
            <div className="lg:col-span-2">
              <h2 className="font-display text-3xl md:text-4xl mb-8">
                ADVENTURE STORIES
              </h2>
              <div className="space-y-8">
                {communityPosts.map(post => <div key={post.id} className="bg-carbon-black rounded-lg overflow-hidden">
                    <div className="md:flex">
                      {/* Post Image */}
                      <div className="md:w-2/5">
                        <img src={post.image} alt={post.title} className="w-full h-64 md:h-full object-cover" />
                      </div>
                      {/* Post Content */}
                      <div className="p-6 md:w-3/5">
                        <div className="flex items-center mb-4">
                          <img src={post.authorImage} alt={post.author} className="h-10 w-10 rounded-full object-cover mr-3" />
                          <div>
                            <h4 className="font-bold">{post.author}</h4>
                            <div className="flex items-center text-sm text-gray-400">
                              <Calendar size={14} className="mr-1" />
                              <span className="mr-3">{post.date}</span>
                              <MapPin size={14} className="mr-1" />
                              <span>{post.location}</span>
                            </div>
                          </div>
                        </div>
                        <Link to={`/community/post/${post.id}`}>
                          <h3 className="font-display text-2xl mb-3 hover:text-outdoor-orange transition-colors">
                            {post.title}
                          </h3>
                        </Link>
                        <p className="text-gray-300 mb-6">{post.excerpt}</p>
                        <div className="flex items-center justify-between">
                          <div className="flex space-x-4">
                            <button className="flex items-center text-gray-400 hover:text-outdoor-orange transition-colors">
                              <ThumbsUp size={18} className="mr-1" />
                              <span>{post.likes}</span>
                            </button>
                            <button className="flex items-center text-gray-400 hover:text-outdoor-orange transition-colors">
                              <MessageCircle size={18} className="mr-1" />
                              <span>{post.comments}</span>
                            </button>
                          </div>
                          <button className="flex items-center text-gray-400 hover:text-outdoor-orange transition-colors">
                            <Share2 size={18} className="mr-1" />
                            <span>Share</span>
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>)}
              </div>
              <div className="mt-8 text-center">
                {!allPostsLoaded ? <button onClick={loadMorePosts} className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-6 py-3 rounded transition-colors">
                    LOAD MORE STORIES
                  </button> : <p className="text-gray-400">
                    You've reached the end of the stories
                  </p>}
              </div>
            </div>
            {/* Sidebar */}
            <div className="lg:col-span-1 space-y-8">
              {/* Community Stats */}
              <div className="bg-carbon-black p-6 rounded-lg">
                <h3 className="font-display text-2xl mb-6">COMMUNITY STATS</h3>
                <div className="grid grid-cols-2 gap-4">
                  <div className="text-center">
                    <div className="text-3xl font-display text-outdoor-orange mb-1">
                      12.4K
                    </div>
                    <div className="text-sm text-gray-300">Members</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-display text-outdoor-orange mb-1">
                      3.8K
                    </div>
                    <div className="text-sm text-gray-300">Stories</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-display text-outdoor-orange mb-1">
                      87
                    </div>
                    <div className="text-sm text-gray-300">Countries</div>
                  </div>
                  <div className="text-center">
                    <div className="text-3xl font-display text-outdoor-orange mb-1">
                      142
                    </div>
                    <div className="text-sm text-gray-300">Gear Reviews</div>
                  </div>
                </div>
              </div>
              {/* Upcoming Events */}
              <div className="bg-carbon-black p-6 rounded-lg">
                <h3 className="font-display text-2xl mb-6">UPCOMING EVENTS</h3>
                <div className="space-y-4">
                  {upcomingEvents.map(event => <div key={event.id} className="border-b border-gray-700 pb-4 last:border-0 last:pb-0">
                      <h4 className="font-bold mb-2">{event.title}</h4>
                      <div className="flex items-center text-sm text-gray-400 mb-2">
                        <Calendar size={14} className="mr-1" />
                        <span>{event.date}</span>
                      </div>
                      <div className="flex items-center text-sm text-gray-400 mb-2">
                        <MapPin size={14} className="mr-1" />
                        <span>{event.location}</span>
                      </div>
                      <div className="flex items-center text-sm text-gray-400">
                        <User size={14} className="mr-1" />
                        <span>{event.attendees} Attending</span>
                      </div>
                    </div>)}
                </div>
                <Link to="/community/events" className="block text-center bg-earth-dark hover:bg-outdoor-orange text-white font-display mt-6 px-4 py-2 rounded transition-colors">
                  VIEW ALL EVENTS
                </Link>
              </div>
              {/* Popular Tags */}
              <div className="bg-carbon-black p-6 rounded-lg">
                <h3 className="font-display text-2xl mb-6">POPULAR TAGS</h3>
                <div className="flex flex-wrap gap-2">
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #ultralight
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #climbing
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #trailrunning
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #alpinism
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #gearfail
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #bikepacking
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #kayaking
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #winter
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #desert
                  </a>
                  <a href="#" className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                    #survival
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}